<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-04 14:10:07
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-07-24 12:40:51
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <drawer-frame
    :title="`${appInfo.name ? '编辑' : '创建'}应用`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <div class="wrapper">
      <div class="left">
        <div class="title">小程序详情</div>
        <div class="center-info">
          <div class="avatar">
            <div class="default">
              <i class="el-icon-user"></i>
            </div>
          </div>
          <div class="name">{{ model.name || '--------' }}</div>
          <div class="code">000000000000000</div>
        </div>
        <el-divider class="divider"></el-divider>
        <div class="contact">
          <div class="item">
            <i class="el-icon-notebook-1"></i>
            <div class="value">{{ model.name || '--------' }}</div>
          </div>
          <div class="item">
            <i class="el-icon-phone-outline"></i>
            <div class="value">
              {{ model.cb_tel || '--------' }}
              <div class="gray">回呼号码</div>
            </div>
          </div>
          <div class="item">
            <i class="el-icon-location-outline"></i>
            <div class="value">{{ model.address || '--------' }}</div>
          </div>
        </div>
        <el-popover placement="bottom" width="120" trigger="hover">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleShowMenuConfigDrawer"
          >
            编辑固定菜单
          </el-button>
          <div slot="reference" class="fixed-menu">
            <div v-for="menu in menuList" :key="menu.id" class="menu">
              <div class="menu-text">
                {{ menu.name }}
              </div>
            </div>
            <div v-if="menuList.length <= 0" class="menu">固定菜单配置</div>
          </div>
        </el-popover>
      </div>
      <div class="right">
        <el-form
          ref="form"
          class="form"
          label-position="top"
          :model="model"
          :rules="rules"
        >
          <el-form-item label="应用Logo：" prop="logo" class="upload-field">
            <el-upload
              class="uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <i class="el-icon-plus"></i>
              <div>上传图片</div>
            </el-upload>
            <div class="upload-tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="应用名称：" prop="name">
                <el-input
                  v-model="model.name"
                  placeholder="请输入应用名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地区：" prop="area">
                <el-select
                  v-model="model.area"
                  placeholder="请选择地区"
                ></el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="短信签名：" prop="sign">
                <el-input
                  v-model="model.sign"
                  placeholder="请输入短信签名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发布行业：" prop="industry">
                <el-select
                  v-model="model.industry"
                  placeholder="请选择发布行业"
                >
                  <el-option :value="1" label="党政军" />
                  <el-option :value="2" label="民主" />
                  <el-option :value="3" label="金融" />
                  <el-option :value="4" label="物流" />
                  <el-option :value="5" label="游戏" />
                  <el-option :value="6" label="电商" />
                  <el-option :value="7" label="微商" />
                  <el-option :value="8" label="沿街商铺" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="手机号白名单：" prop="whiteList">
            <el-input
              v-model="model.whiteList"
              type="textarea"
              rows="5"
              placeholder="请输入手机号白名单"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用描述信息：" prop="desc">
            <el-input
              v-model="model.desc"
              type="textarea"
              rows="5"
              placeholder="请输入应用描述信息"
            ></el-input>
          </el-form-item>
          <el-card ref="options" class="box-card" shadow="never">
            <div
              slot="header"
              style="padding: 18px 20px"
              @click="handleShowOptions"
            >
              <i
                :class="`el-icon-arrow-${
                  isShowOptionConfig ? 'down' : 'right'
                }`"
              ></i>
              可选配置项
            </div>
            <div v-show="isShowOptionConfig" class="option-config">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    label="短信端口号："
                    prop="port"
                    :required="false"
                  >
                    <el-input
                      v-model="model.port"
                      placeholder="等待平台分配"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="行业：" prop="indust" :required="false">
                    <el-cascader
                      v-model="model.indust"
                      style="width: 100%"
                      :show-all-levels="false"
                      placeholder="请选择行业"
                      :options="industList"
                      :props="{
                        checkStrictly: true,
                        emitPath: false,
                        value: 'id',
                        label: 'name',
                        children: 'sub_data',
                      }"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item
                    label="回呼号码："
                    prop="cb_tel"
                    :required="false"
                  >
                    <el-input
                      v-model="model.cb_tel"
                      placeholder="请输入回呼号码"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="电子邮箱："
                    prop="email"
                    :required="false"
                  >
                    <el-input
                      v-model="model.email"
                      placeholder="请输入电子邮箱"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="主页地址："
                    prop="url_index"
                    :required="false"
                  >
                    <el-input
                      v-model="model.url_index"
                      placeholder="请输入主页地址"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="办公地址："
                    prop="address"
                    :required="false"
                  >
                    <el-input
                      v-model="model.address"
                      placeholder="请输入办公地址"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item
                    label="经纬度："
                    prop="lnglat"
                    :required="false"
                  >
                    <el-input v-model="model.lnglat" placeholder="请输入内容">
                      <el-button
                        slot="append"
                        class="location"
                        type="primary"
                        icon="el-icon-location"
                      ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    label="条款信息URL："
                    prop="url_terms"
                    :required="false"
                  >
                    <el-input
                      v-model="model.url_terms"
                      placeholder="请输入条款信息URL"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="背景图片地址URL："
                    prop="url_pic"
                    :required="false"
                  >
                    <el-input
                      v-model="model.url_pic"
                      placeholder="请输入背景图片地址URL"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="聊天气泡颜色："
                    prop="bgColor"
                    :required="false"
                  >
                    <el-color-picker
                      v-model="model.bgColor"
                      show-alpha
                      :predefine="predefineColors"
                      placeholder="请选择聊天气泡颜色"
                    ></el-color-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-form>
      </div>
    </div>
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :append-to-body="true"
      :visible.sync="showDrawer"
      direction="rtl"
      size="1240px"
      @closed="isDrawer = false"
    >
      <menu-config
        v-if="isDrawer"
        :menus="menuList"
        @close="showDrawer = false"
        @save="handleSaveMenu"
      ></menu-config>
    </el-drawer>
  </drawer-frame>
</template>
<script>
import { GetIndustList } from '@/api/app'
import MenuConfig from './menuConfig'
export default {
  components: { MenuConfig },
  props: {
    appInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      industList: [],
      menuList: [],
      showDrawer: false,
      isDrawer: false,
      isShowOptionConfig: false,
      model: {
        name: '',
        logo: '',
        area: '',
        whiteList: '',
        desc: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入应用名称',
            trigger: 'change',
          },
        ],
        sign: [
          {
            required: true,
            message: '请输入短信签名',
            trigger: 'change',
          },
        ],
        whiteList: [
          {
            required: true,
            message: '请输入手机号白名单',
            trigger: 'change',
          },
        ],
        desc: [
          {
            required: true,
            message: '请输入应用描述信息',
            trigger: 'change',
          },
        ],
        logo: [
          {
            required: true,
            message: '请上传应用Logo',
            trigger: 'change',
          },
        ],
        area: [
          {
            required: true,
            message: '请选择地区',
            trigger: 'change',
          },
        ],
        industry: [
          {
            required: true,
            message: '请选择发布行业',
            trigger: 'change',
          },
        ],
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
      ],
    }
  },
  created() {
    this.getIndustList()
    if (this.appInfo.app_id) {
      this.model = this.appInfo
      this.model.whiteList = this.model.white.split('|').join('\n')
      const color = this.model.color.split('|')
      if (color.length >= 3) {
        this.model.bgColor = `rgb(${color[0]},${color[1]},${color[2]})`
      }

      this.menuList = this.model.menuList || []
    }
  },
  methods: {
    async getIndustList() {
      const { data } = await GetIndustList()
      this.industList = data.list
    },
    handleShowOptions() {
      this.isShowOptionConfig = !this.isShowOptionConfig
      this.$nextTick(() => {
        if (this.isShowOptionConfig) {
          this.$refs.options.$el.scrollIntoView()
        }
      })
    },
    handleSubmit() {
      console.log(this.model)
      this.$refs.form.validate(valid => {})
    },
    handleShowMenuConfigDrawer(item) {
      this.isDrawer = true
      this.showDrawer = true
    },
    handleSaveMenu(menuList) {
      this.menuList = menuList
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  .left {
    width: 346px;
    height: 675px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 70px 14px;
    position: relative;
    background: url(~@/assets/img/phone.png);
    .title {
      margin: 15px 12px 20px;
      font-size: 16px;
    }
    .center-info {
      text-align: center;
      .avatar {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 50%;
        overflow: hidden;
        .default {
          width: 100%;
          height: 100%;
          background: #ccc;
          color: #fff;
        }
      }
      .name {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 600;
        font-size: 20px;
        line-height: 1.4;
        margin: 14px 0px 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .divider {
      width: auto;
      margin: 24px 20px;
      background: rgba(0, 0, 0, 0.06);
    }
    .contact {
      padding: 0 20px;
      .item {
        margin-top: 24px;
        display: flex;
        align-items: center;
        // font-weight: 600;
        i {
          margin-right: 16px;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.9);
        }
        .gray {
          margin-top: 4px;
          color: #999;
          font-size: 12px;
        }
      }
    }
    .fixed-menu {
      position: absolute;
      bottom: 70px;
      left: 14px;
      right: 14px;
      height: 50px;
      line-height: 48px;
      border-top: 1px solid rgb(217, 217, 217);
      display: flex;
      align-items: center;
      .menu {
        width: 33.33%;
        flex: 1;
        text-align: center;
        cursor: pointer;
        position: relative;

        .menu-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:not(:first-child) {
          border-left: 1px solid rgba(0, 0, 0, 0.06);
        }
        &.current {
          background: rgba(0, 0, 0, 0.03);
        }
        .icon {
          color: $primary;
          font-size: 16px;
          &.el-icon-plus {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    margin: 0 0 0 24px;
    border-left: 1px solid #f0f0f0;
    padding-left: 24px;
  }
  .form {
    ::v-deep .el-form-item__label {
      padding: 0;
    }
    .upload-field {
      ::v-deep .el-form-item__content {
        display: flex;
        align-items: flex-end;
      }
      .upload-tip {
        margin-left: 16px;
        color: #999;
      }
    }
    .el-select {
      width: 100%;
    }
    .uploader {
      display: inline-block;
      padding: 24px 16px;
      line-height: 24px;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      background-color: #fafafa;
      cursor: pointer;
      color: #606266;
      &:hover {
        border-color: $primary;
      }
      .el-icon-plus {
        font-size: 20px;
      }
    }
    .box-card {
      border: 1px solid #dcdfe6;

      ::v-deep {
        .el-card__body {
          padding: 0;
        }
        .el-card__header {
          cursor: pointer;
          border: none;
          padding: 0;
          font-size: 15px;
        }
      }
      .option-config {
        padding: 20px;
        border-top: 1px solid #dcdfe6;
      }
      .location {
        background: $primary;
        color: #fff;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}
</style>
